<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>轨迹详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">

	<style>
		#container {
			width: 100%;
			height: calc(105vh - 40px);
		}

		body {
			overflow-y: hidden;
		}

		.tool {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
			background-color: azure;
			display: none;
		}
	</style>

</head>

<body>
	<div class="header">
		<div class="header_title">轨迹详情</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>

	<div style="position: relative;">
		<div id="container"></div>
		<div class="tool" id="tool">
			校车定位信息最后更新时间：<span id="text"></span>
			<button id="location">定位到校车位置</button>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/js/common.js"></script>

	<script src="https://webapi.amap.com/maps?v=2.0&key=d3d68f711955b0418e1d9c6aa88b1d39&plugin=AMap.Driving"></script>
	<script>
		window._AMapSecurityConfig = {
			serviceHost: location.origin + '/_AMapService'
		}

		var p = params();
		var busId = p.id;

		var map = new AMap.Map('container', {
			zoom: 17
		});

		var driving = new AMap.Driving({
			map: map
		});

		var marker;
		var lnglat;
		var path = [];
		var polyline;

		var prefix = isTeacher() ? '/t' : '/s';

		axios.get(prefix + '/bus/' + busId).then(function (res) {
			axios.get(prefix + '/route/' + p.routeId).then(function (res) {
				var stops = res.data.stops.map(function (stop) {
					return [stop.lng, stop.lat];
				});

				driving.search(stops.shift(), stops.pop(), {
					waypoints: stops
				}, function (status, result) {

				});
			});
		});

		function drawLine() {
			if (path.length < 2) return;
			if (polyline) map.remove(polyline);
			polyline = new AMap.Polyline({
				path: path,
				borderWeight: 3,
				strokeColor: 'green',
				lineJoin: 'round',
				showDir: true
			});
			map.add(polyline);
		}

		function getLocation() {
			axios.get(prefix + '/location/' + busId).then(function (res) {
				var o = res.data;
				if (o) {
					if (lnglat && !(lnglat.lng == o.lng && lnglat.lat == o.lat)) {
						path.push([o.lng, o.lat]);
						drawLine();
					}

					lnglat = [o.lng, o.lat];
					if (marker) {
						marker.setPosition(lnglat);
					} else {
						marker = new AMap.Marker({
							position: lnglat,
							icon: '/wechat/image/bus_here.svg',
							title: '校车'
						});
						map.add(marker);
						map.setZoomAndCenter(16, lnglat);
						document.getElementById('tool').style.display = 'block';
					}
					document.getElementById('text').innerHTML = dayjs(o.ts).format('YYYY-MM-DD HH:mm:ss');
				}
			});
		}





		document.getElementById('location').onclick = function () {
			map.setCenter(lnglat);
		}
		getLocation();
		setInterval(getLocation, 2000);
	</script>

</body>

</html>